<!--
* @author wn
* @date 2022/06/17 10:49:18
* @description: 数量选择组件 --》商品详情 和 购物车
* 传入  最小值  最大值  是否显示 label
* v-model 双向绑定   提供 change 事件
* readonly
!-->
<template>
	<div class="xtx-number-box">
		<div v-if="label" class="label">{{ label }}</div>
		<div class="number-box">
			<a @click="toggle(-1)" href="javascript:;">-</a>
			<input type="text" :value="modelValue" @change.stop="changeNumber" />
			<a @click="toggle(1)" href="javascript:;">+</a>
		</div>
	</div>
</template>
<script>
import { useVModel } from '@vueuse/core'
export default {
	name: 'XtxNumberBox',
	props: {
		modelValue: {
			type: Number,
			default: 1,
		},
		min: {
			type: Number,
			default: 1,
		},
		max: {
			type: Number,
			default: 10,
		},
		label: {
			type: String,
			default: '',
		},
	},
	// 子组件中不添加  就是原生事件，添加了就是自定义事件
	emits: ['change'],
	setup(props, { emit }) {
		const toggle = step => {
			const newValue = props.modelValue + step
			// 判断 newValue 是否在 min 和 max 之间
			// 直接返回
			if (newValue < props.min || newValue > props.max) return
			// 使用 useVModel 通知父组件
			const number = useVModel(props, 'modelValue', emit)
			number.value = newValue
			// 父组件可通过 change 获取值
			emit('change', newValue)
		}
		const changeNumber = event => {
			// String --> number
			const newValue = +event.target.value
			const number = useVModel(props, 'modelValue', emit)
			number.value = newValue
			// 父组件可通过 change 获取值
			emit('change', newValue)
		}
		return { toggle, changeNumber }
	},
}
</script>
<style scoped lang="less">
.xtx-number-box {
	display: flex;
	align-items: center;
	padding-left: 10px;
	.label {
		width: 50px;
		color: #999;
	}
	.number-box {
		display: flex;
		width: 120px;
		height: 30px;
		border: 1px solid #e4e4e4;
		a {
			width: 29px;
			line-height: 28px;
			text-align: center;
			background: #f8f8f8;
			font-size: 16px;
			color: #666;
			&:first-child {
				border-right: 1px solid #e4e4e4;
			}
			&:last-child {
				border-left: 1px solid #e4e4e4;
			}
		}
		input {
			// input flex: 1;失效
			// flex: 1;
			width: 60px;
			padding: 0 5px;
			text-align: center;
			color: #666;
		}
	}
}
</style>
